<template>
	<view :style="{'--color':color}" >
		<status-bar title='发帖'></status-bar>
		
		<view class="rows p-left30 p-top30">
			<textarea class="rows textarea color_16 size30 bot p-right30"
			    disable-default-padding v-model="content" :maxlength="-1" placeholder="请输入内容~">
			</textarea>
			
			<view class="rows p-right30 bot p-bot30 m-top50">
				<view class="color_16 h6">上传照片/最多上传9张图片</view>
				<view class="row m-top30 ">
					<view class="list" v-for="(item,index) in imgList" :key="index">
						<image :src="imgUrl+item" mode="aspectFill" class="listImg" @click="$previewImgs(index,imgList)"></image>
						<text class="iconfont icon-jianshao delImg thmeColor  bgwhite bor_radius" @click.stop="delImg(index)"></text>
					</view>
					
					<view class="list" v-if="imgList.length < 9"  @click="selectImgs">
						<image :src="staticUrl+'/images/jh_up/addImg.png'" class="uploadImg"></image>
					</view>
				</view>
			</view>
				
			<view class="row bot_bor p-bot30 m-top50 p-right30" v-if="homePun != 1">
				 <text class="color_16 size30 bold m-top10">加入话题</text>
				 <view class="flex-1 d-flex f-wrap m-left30">
					 <block v-for="(item,index) in topic" :key="index">
					 <view class="m-bot30 flexac" :class="{'labelActive':item.classifyid == classifyid}" @click="classifyid = item.classifyid">
						<view class="label ">{{item.name}}</view>
					 </view>
					</block>
				 </view>
			</view>
		</view>
		
		<view class="row j-centert m-top100 p-bot30">
			<view class="signUpBtn white size36 bold flexac" @click="config">确定发布</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				staticUrl: this.staticUrl,
				content:'',
				imgList:[],
			    classifyid:'',
				homePun:0,
				genre:1,
			}
		},
		onLoad(option) {
			if(option.classifyid) this.classifyid = option.classifyid;
			if(option.homePun && option.homePun != null) this.homePun = option.homePun;
			if(option.genre) this.genre = option.genre;
		},
		methods: {
			config(){
				if(!this.content) return this.$Toast('内容不能为空!');
				if(!this.classifyid) return this.$Toast('未选择话题');
				if(this.genre == 2 && !this.imgList.length) return this.$Toast('未上传图片');
				this.$http.post({
					url:'/communityApi/upNewContent',
					data:{
						imgUrl:this.imgList.toString(),
						classifyid:this.classifyid,
						content:this.content,
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.$Toast(res.msg,2)
				})
			},
			
			
			//  上传图片
			selectImgs() {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera '],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((item, index) => {
							that.$showLoading('上传中~');
							that.$common.uploadFile('/zzjApp/uploade?bid=' + that.bid, item).then(
								res2 => {	
									if(res2.errcode != '100') return that.$Toast(res.msg)
									let imgItem = res2.url.substring(22, res2.url.length);
									if(that.imgList.length >= 9) return that.$Toast('图片限上传9张');
									that.imgList = that.imgList.concat(imgItem);
									if(index+1 == tempFilePaths.length) that.$hideLoading();
								}
							)
						})
						
					}
				})
			},
			
			delImg(index){
				this.imgList.splice(index,1);
			}
		},
		computed:{
			...mapState(['color','bid','topic']),
		}
	}
</script>

<style>
	page{
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
		.textarea{
			height: 300rpx;
		}
		.list{
			width:150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			margin-right: 32rpx;
			margin-bottom: 30rpx;
			position: relative;
		}
		.uploadImg{
			
			width:150rpx;
			height: 150rpx;
		}
		.list:nth-child(3n){
			margin-right: 0 !important;
		}
		.delImg{
			width:32rpx;
			height: 32rpx;
			position: absolute;
			top:-14rpx;
			right: -14rpx;
		}
		.listImg{
			width:150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}
		.label{
			color: #161616;
			font-size:30rpx;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
		}
		
		.labelActive .label{
			
			 background-color: var(--color);
			color:#fff;
		
			font-weight: bold;
		}
		.selBox{
			width:36rpx;
			height: 36rpx;
			border-radius: 50%;
			border:1px solid #161616;
		}
		.selActive .selBox{
			border:1px solid var(--color);
			background-color: var(--color);;
		}
		.signUpBtn{
			width: 454rpx;
			height: 100rpx;
			background-color: var(--color);
			border-radius: 50rpx;
		}
</style>
